import React, { Component } from 'react';
import { Select, Input, Button } from 'antd';
import {
  _examType,
  _subject,
  _getQuestionsType,
  _questions,
} from '@/api/addQuestion';
import E from 'wangeditor';
import './index.less';
import { RouteComponentProps } from 'react-router-dom';
const { Option, OptGroup } = Select;

// function IndexSelect(props: any) {
//   console.log(props.data);

//   return (
//     <div>
//       <Select
//         defaultValue={props.title}
//         style={{ width: 200 }}
//         onChange={(value) => {
//           console.log(`selected ${value}`);
//         }}
//       >
//         {props.data.map((item: any, index: any) => {
//           return (
//             <Option value={item.exam_id} key={index}>
//               {item.exam_name}
//             </Option>
//           );
//         })}
//       </Select>
//     </div>
//   );
// }
interface Iprops extends RouteComponentProps {}
interface Istate {
  editora: any;
  editorb: any;
  examTypelist: any;
  subjectlist: any;
  getQuestionsTypelist: any;
  questions_stem: string;
  subject_id: string;
  exam_id: string;
  questions_type_id: string;
  user_id: string;
  flag:boolean
}
class addQuestion extends Component<Iprops, Istate> {
  state = {
    editora: {},
    editorb: {},
    examTypelist: [],
    subjectlist: [],
    getQuestionsTypelist: [],
    questions_type_id: '', //试题类型id
    questions_stem: '', //题干
    subject_id: '', //课程id
    exam_id: '', //考试类型id
    user_id: window.localStorage.user_id, //用户id
    flag:false
    // questions_answer: '', //题目答案
    // title:''//试题的标题
  };
  aa() {
    const editor = new E('.aa');
    editor.config.zIndex = 1;
    editor.config.height = 100;
    editor.create();
    this.setState({
      editora: editor,
    });
  }
  bb() {
    const editor = new E('.bb');
    editor.config.zIndex = 1;
    editor.config.height = 200;
    editor.create();
    this.setState({
      editorb: editor,
    });
  }
  async componentDidMount() {
    this.aa();
    this.bb();

    let res = await _examType({});
    // console.log(res);
    if (res.data.code == 1) {
      this.setState({
        examTypelist: res.data.data,
      });
    }

    let res1 = await _subject({});
    // console.log(res1);
    if (res1.data.code == 1) {
      this.setState({
        subjectlist: res1.data.data,
      });
    }

    let res2 = await _getQuestionsType({});
    // console.log(res2);
    if (res2.data.code == 1) {
      this.setState({
        getQuestionsTypelist: res2.data.data,
      });
    }
  }
  // handleChange = (value: any) => {
  //   console.log(`selected ${value}`);
  // };
  // 题干
  TIgan = (e: any) => {
    // console.log(e);
    this.setState({ questions_stem: e.target.value });
    // console.log(this.state.title);
  };
  ButtonSubmit = async () => {
    // this.setState({flag:true})
 
    
    let {
      questions_type_id,
      questions_stem,
      subject_id,
      exam_id,
      user_id,
      editorb,
      editora,
    } = this.state;
    // console.log(
    //   questions_type_id,'*',
    //   questions_stem,'*',
    //   subject_id,'*',
    //   exam_id,'*',
    //   user_id,'*',
    //   (editorb as any).txt.text(),'*',
    //   (editora as any).txt.text(),'*'
    // );

    let res = await _questions({
      questions_type_id,
      subject_id,
      exam_id,
      user_id,
      questions_stem,
      questions_answer:  (editorb as any).txt.text(),
      title:(editora as any).txt.text(),
    });
    // console.log(res);
    // if(res.data.code==1){
    //  this.setState({
    //     questions_type_id: '', //试题类型id
    //   questions_stem: '', //题干
    //   subject_id:'', //课程id
    //   exam_id:'', 
    //   editora:'',
    //   editorb:'',
    //  })
    //   alert(res.data.msg)
    // }
  };
  render() {
    let { examTypelist, subjectlist, getQuestionsTypelist } = this.state;
    return (
      <div className="addQuestion">
        <h2>添加试题</h2>
        <div className="addQuestionbox">
          <div>
            <p>题目信息</p>
            <p>题干</p>
            <Input
              placeholder="请输入题目标题，不超过20个字"
              style={{ width: '300px' }}
              value={this.state.questions_stem}
              onChange={this.TIgan}
            />
          </div>
          <div className="addQiestionmoddle">
            <p>题目主题</p>
            <div className="aa"></div>
          </div>

          <div>
            <p>请选择考试类型</p>
            <Select
              defaultValue="周考1"
              style={{ width: 200 }}
              // allowClear={this.state.flag}
              onChange={(value) => {
                console.log(`selected ${value}`);
                this.setState({ exam_id: value });
              }}
            >
              {examTypelist.map((item: any, index: any) => {
                // console.log(item);
                
                return (
                  <Option value={item.exam_id} key={index}>
                    {item.exam_name}
                  </Option>
                );
              })}
            </Select>
          </div>

          <div>
            <p>请选择课程类型</p>
            <Select
              defaultValue="javaScript上"
              style={{ width: 200 }}
              onChange={(value) => {
                // console.log(`selected ${value}`);
                this.setState({ subject_id: value });
              }}
            >
              {subjectlist.map((item: any, index: any) => {
                return (
                  <Option value={item.subject_id} key={index}>
                    {item.subject_text}
                  </Option>
                );
              })}
            </Select>
          </div>

          <div>
            <p>请选择题目类型</p>
            <Select
              defaultValue="简单题"
              style={{ width: 200 }}
              onChange={(value) => {
                console.log(`selected ${value}`);
                this.setState({ questions_type_id: value });
              }}
            >
              {getQuestionsTypelist.map((item: any, index: any) => {                
                return (
                  <Option value={item.questions_type_id} key={index}>
                    {item.questions_type_text}
                  </Option>
                );
              })}
            </Select>
          </div>
          <div>
            <p>答案信息</p>
            <div className="bb"></div>
          </div>
          <Button
            type="primary"
            onClick={
              this.ButtonSubmit
              // console.log((this.state.editora as any).txt.text(),"*************",(this.state.editorb as any).txt.text());
            }
          >
            提交
          </Button>
        </div>
      </div>
    );
  }
}

export default addQuestion;
